<template>
  <div class="test-item-wrap">
    {{ index + 1 }}.
    <span v-for="(word, i) in renderHtml" :key="word + i">
      <template v-if="Show(word)">
        <input class="space-blank" maxlength="30" type="text" />
      </template>
      <template v-else>
        <a-popover
          transitionName=""
          overlayClassName="lookup-popover"
          placement="bottom"
          :visible="visibleKey === `${index}-${i}`"
          :destroyTooltipOnHide="true"
          trigger="click"
        >
          <span @click.stop="checkWord(word, `${index}-${i}`)">{{ word }}</span>
          <div slot="content">
            <div class="lookup-content">
              <div class="title">
                {{ translate.word || translate.word }}
                <img
                  v-show="translate.word"
                  class="icon-img"
                  @click.stop="translateVoice"
                  src="@/assets/reverse/audio-play1.png"
                  alt=""
                />
              </div>
              <div class="translate">
                {{ translate.translation || "未找到该生词" }}
              </div>
              <div class="btn-group">
<!--                <a :disabled="!translate.prototype_word" @click.stop="addWord"-->
<!--                  ><img-->
<!--                    class="icon-img"-->
<!--                    src="@/assets/reverse/add1.png"-->
<!--                    alt=""-->
<!--                  />添加生词</a-->
<!--                >-->
<!--                <a @click.stop="translateDetail"-->
<!--                  ><img-->
<!--                    class="icon-img"-->
<!--                    src="@/assets/reverse/detail1.png"-->
<!--                    alt=""-->
<!--                  />单词详解</a-->
<!--                >-->
              </div>
            </div>
          </div>
        </a-popover>
      </template>
    </span>
  </div>
</template>

<script>
import $ from "jquery";
import { Popover } from "ant-design-vue";
import {checkWord} from "@/api/reverse";
export default {
  components: {
    APopover: Popover,
  },
  data() {
    return {
      translate: {},
    };
  },
  props: ["renderData", "index", "visibleKey"],
  computed: {
    renderHtml: function() {
      return this.renderData.title.split(" ");
    },

  },
  watch: {},
  methods: {
    Show(str){
      let s = str.split("##");
      if (s.length >= 2){
        return true
      }else {
        return false
      }
    },
    replaceText(word) {
      // 去除末尾标点
      const pattern = /[^a-zA-Z']/g;
      return word.replace(pattern, "");
    },
    checkWord(value, i) {
      this.translate = {};
      this.$emit('checkWordVisible', i)
      checkWord({ word: value }).then((res) => {
        this.translate = res.data;
      });
    },
    addWord() {
      addWord({
        prototype_word: this.translate.prototype_word,
        select_word: this.translate.select_word,
        question_type: 3,
        is_diff: "0",
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.$message.success("添加生词成功");
        }
      });
    },
    translateVoice() {
      let audio = document.getElementById("reverse-audio");
      audio.src = this.translate.voiceUrl;
      audio.play();
    },
    translateDetail() {
      this.setTranslateModal({
        visible: true,
        word: this.translate.select_word,
      });
      document.getElementById("app").click();
    },
  },
  created() {},
  mounted() {
    let textWidth = function(text) {
      var sensor = $("<span>" + text + "</span>").css({
        display: "none",
        "font-size": "34px",
      });
      $("body").append(sensor);
      var width = sensor.width() - text.length * 3;
      sensor.remove();
      return width;
    };
    $(".space-blank").on("input", function() {
      $(this).val(
        $(this)
          .val()
          .replace(/[^A-Za-z0-9'’ ]/g, "")
      );
      $(this).width(textWidth($(this).val()) + 30);
      $(this).css({
        color: "#FF9D00",
        "border-color": "#FF9D00",
        "font-weight": 700,
      });
    });
    $(".space-blank").on("blur", function() {
      if (!$(this).val())
        $(this).css({
          "border-color": "#333",
        });
    });
  },
};
</script>
<style  scoped>
.test-item-wrap {
  width: 800px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 20px;
  font-size: 24px;
  text-align: left;
  transition: box-shadow 0.3s;
  &:hover {
    box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
  }
  & > span {
    display: inline-block;
    margin: 0 4px;
  }
  .space-blank {
    width: 30px;
    border: none;
    border-bottom: 1px solid #333;
    text-align: center;
  }
  .space-blank:focus {
    border-bottom: 1px solid #333;
    outline: none;
  }
}

</style>
